<template>
  <div
    id="map"
    ref="map"
    @contextmenu.prevent=""
    @mousedown.right="changeRotation('down',$event)"
    @mousemove="changeRotation('move',$event)"
    @mouseup.right="changeRotation('up',$event)"
  />
</template>

<script>
import Map from 'ol/Map'
import { defaults, Rotate } from 'ol/control'
import { DragPan } from 'ol/interaction'
import Image from 'ol/layer/Image'
import ImageWMS from 'ol/source/ImageWMS'
import View from 'ol/View'
import Projection from 'ol/proj/Projection'

var preX
var preY
export default {
  name: 'BaseMap',
  props: {
    width: {
      type: String, // 类型
      default: '1500'
    },
    height: {
      type: String, // 类型
      default: '500'
    },

    mapUrl: {
      type: String, // 类型
      default: () => { return null }
    },
    layers: {
      type: String, // 类型
      default: () => { return null }
    },
    projection: {
      type: String, // 类型
      default: () => { return null }
    },
    bounds: {
      type: String, // 类型
      default: () => { return null }
    }
  },
  data() {
    return {
      map: null,
      mapLayer: null,
      mapView: null,
      radian: 0
    }
  },
  watch: {
    mapUrl: function(val) {
      if (this.mapUrl != null && this.mapUrl !== '') {
        if (this.mapLayer == null) { this.initBaseMap() } else { this.resetBaseMap() }
      }
    }
  },
  mounted() {
    if (this.mapUrl != null && this.mapUrl !== '') {
      this.initBaseMap()
    }
  },
  methods: {
    // 初始化底图
    initBaseMap() {
      // 更新底图的Layer和View对象
      this.loadParam()
      // 初始化底图
      this.map = new Map({
        controls: defaults({
          attribution: false,
          zoom: false
        }),
        target: 'map',
        layers: [this.mapLayer],
        view: this.mapView
      })
      // 初始化视图定位
      const bound = this.bounds.split(',').map(Number)
      this.map.getView().fit(bound, this.map.getSize())
      this.map.addControl(new Rotate({
        autoHide: false
      }))
    },
    loadParam() {
      this.mapLayer = new Image({
        source: new ImageWMS({
          url: this.mapUrl,
          params: {
            'VERSION': '1.1.1',
            'LAYERS': this.layers
          }
        })
      })
      const projection = new Projection({
        code: this.projection,
        units: 'm',
        global: false
      })
      this.mapView = new View({
        projection: projection,
        rotation: this.radian
      })
    },
    resetBaseMap() {
      if (this.mapLayer != null) {
        this.map.removeLayer(this.mapLayer)
        this.mapLayer = null
        this.mapView = null
      }
      this.loadParam()
      this.map.addLayer(this.mapLayer)
      this.map.setView(this.mapView)
      const bound = this.bounds.split(',').map(Number)
      this.map.getView().fit(bound, this.map.getSize())
    },
    changeRotation(type, event) {
      // 点击默认的移动地图事件
      let pan = null
      this.map.getInteractions().forEach(function(element, index, array) {
        if (element instanceof DragPan) {
          pan = element
        }
      })
      // 右键按下
      if (type === 'down') {
        this.activeMouseRight = true
        // 禁用地图拖动事件
        pan.setActive(false)
      } else if (type === 'move') {
        // 判断右键是否被按下
        if (this.activeMouseRight && preX) {
          var addRadian = (event.screenY - preY) / 50
          if (event.clientX < 980) {
            addRadian = -addRadian
          }
          var newRadian = this.radian + addRadian
          this.map.getView().setRotation(newRadian)
          this.radian = newRadian
        }
        preX = event.screenX
        preY = event.screenY
      } else if (type === 'up') {
        this.activeMouseRight = false
        // 启用地图拖动事件
        pan.setActive(true)
      }
    }
  }
}
</script>

<style scoped>

</style>
